<template>
  <div style="background: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);min-height: 100vh;">
      <el-header style="padding: 0; height: 40px">
        <Nav/>
      </el-header>
      <el-main style="margin: 0 auto;width: 85vw;overflow: visible">
        <router-view/>
      </el-main>
    <el-button v-if="userInfo"  circle @click="dialogTableVisible = true"
               class="consultation_box">
      <i class="el-icon-user" style="display: block"></i>
      <span style="display: block">咨询</span>
    </el-button>
    <el-backtop :visibility-height="350" style="height: 65px; width: 65px" :right="50" :bottom="50">

    </el-backtop>
    <el-dialog title="在线咨询"
               :visible.sync="dialogTableVisible"
               width="80%"
               class="dialog_class"
               top="5vh"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-if="dialogTableVisible"
               destroy-on-close
               append-to-body
    >
      <LemonIM/>
    </el-dialog>
  </div>
</template>

<script>
  import Nav from "@/components/Nav";
  import LemonIM from "@/components/LemonIM";
    export default {
      name: "Home",
      data() { //选项 / 数据
        return {
          userInfo: null,
          dialogTableVisible: false
        }
      },
      components: { Nav, LemonIM },
      methods: { //事件处理器
      },
      created() { //生命周期函数
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        document.title = "老年人社区服务与管理平台";
      }
    }
</script>

<style scoped>
  .consultation_box{
    position: fixed;
    bottom: 150px;
    right: 50px;
    color: white !important;
    height: 65px;
    width: 65px;
    line-height: 1.5 !important;
    z-index: 2000;
    box-shadow: 0 0 10px #d6d6d6;
    background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%) !important;
  }
</style>
